<template>
  <div class="scroll-container" ref="scroll-container">
    <div class="content-container" ref="content-container">
      <img
          v-for="(item, index) in list"
          :key="index"
          :src="item"
          class="scroll-img"
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkSilhouette',
  data() {
    return {
      list: [
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/187.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/188.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/189.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/190.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/2.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/3.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/4.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/5.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/6.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/7.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/8.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/9.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/10.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/11.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/12.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/13.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/14.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/15.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/16.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/17.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/18.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/19.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/20.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/21.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/22.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/23.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/24.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/25.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/26.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/27.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/28.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/29.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/30.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/31.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/32.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/33.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/34.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/35.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/36.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/37.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/38.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/39.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/40.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/41.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/42.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/43.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/44.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/45.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/46.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/47.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/48.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/49.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/50.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/51.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/52.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/53.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/54.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/55.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/56.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/57.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/58.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/59.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/60.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/61.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/62.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/63.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/64.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/65.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/66.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/67.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/68.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/69.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/70.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/71.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/72.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/73.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/74.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/75.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/76.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/77.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/78.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/79.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/80.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/81.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/82.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/83.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/84.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/85.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/86.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/87.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/88.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/89.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/90.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/91.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/92.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/93.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/94.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/95.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/96.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/97.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/98.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/99.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/100.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/101.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/102.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/103.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/104.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/105.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/106.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/107.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/108.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/109.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/110.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/111.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/112.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/113.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/114.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/115.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/116.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/117.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/118.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/119.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/120.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/121.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/122.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/123.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/124.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/125.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/126.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/127.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/128.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/129.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/130.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/131.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/132.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/133.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/134.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/135.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/136.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/137.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/138.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/139.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/140.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/141.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/142.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/143.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/144.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/145.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/146.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/147.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/148.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/149.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/150.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/151.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/152.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/153.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/154.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/155.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/156.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/157.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/158.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/159.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/160.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/161.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/162.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/163.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/164.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/165.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/166.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/167.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/168.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/169.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/170.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/171.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/172.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/173.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/174.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/175.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/176.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/177.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/178.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/179.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/180.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/181.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/182.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/183.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/184.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/185.jpg",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/186.jpg"
      ],
      scrollTimer: null,
      currentScrollLeft: 0
    }
  },
  methods: {
    startAutoScroll() {
      this.$nextTick(() => {
        const container = this.$refs['scroll-container']
        const content = this.$refs['content-container']

        // 计算可滚动距离
        const maxScrollLeft = content.scrollWidth - container.clientWidth

        this.scrollTimer = setInterval(() => {
          if (this.currentScrollLeft >= maxScrollLeft) {
            this.currentScrollLeft = 0 // 滚动到最右端后重置
          } else {
            this.currentScrollLeft += 1
          }
          container.scrollLeft = this.currentScrollLeft
        }, 50) // 调整间隔控制滚动速度
      })
    }
  },
  mounted() {
    this.startAutoScroll()
  },
  beforeDestroy() {
    clearInterval(this.scrollTimer)
  }
}
</script>

<style scoped lang="scss">
.scroll-container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  white-space: nowrap;

  .content-container {
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .scroll-img {
    display: inline-block;
    width: 200px;
    height: 100%;
    margin-right: 20px;
    object-fit: cover;
    vertical-align: top;

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
